<template>
  <view class="gg-button-wrap">
    <button v-if="type=='pay'" class="gg-button-item gg-button-pay" type="primary" @click="parentClick">{{label}}</button>
    <button v-else-if="type=='save'" class="gg-button-item gg-button-save" type="error" @click="parentClick">{{label}}</button>
    <button v-else-if="type=='submit'" class="gg-button-item gg-button-save" type="primary" form-type="submit" @click="parentClick">{{label}}</button>
    <button v-else-if="type=='reset'" class="gg-button-item gg-button-cancel" type="primary" form-type="reset" @click="parentClick">{{label}}</button>
    <button v-else-if="type=='cancel'" class="gg-button-item gg-button-cancel" type="primary" @click="parentClick">{{label}}</button>
    <button v-else class="gg-button-item" type="primary" @click="parentClick">{{label}}</button>
    <!-- :style="{ background: themesData.color }" -->
  </view>
</template>

<script>
export default {
  name: "GgButton",
  props: {
    label: {
      type: String,
      default: "save"
    },
    type: {
      type: String,
      default: "save"
    },
    click: {
      type: Function
    },

  },
  data() {
    return {
      themesData: {}, // 获取用户主题配置
    };
  },
  created() {
    if (this.$store) {
      // this.themesData = this.$store.state.storeSystem.themesData || '';
    }
  },
  methods: {
    diyClick() {
      if (typeof this.click == 'function') {
        this.click();
      }
    },
    parentClick(evt) {
      this.$emit('click', evt);
    },
  }
};
</script>

<style>
.gg-button-wrap {
  padding: 0 10px;
  margin-top: 10px;
}
.gg-button-item {
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0px 15px;
  line-height: 100%;
  padding: 10px 0;
  color: #fff;
  border-radius: 40px;
}

.gg-button-pay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 275px;
  height: 40px;
  background-color: #62a9df;
  box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
  margin: 10px auto;
}
.gg-button-save {
  background: #e4393c;
  background: linear-gradient(to right, #ffa300, #ff8a00, #e95f00);
}
.gg-button-cancel {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  color: #202020;
}
</style>
